<template>
  <div class="container">
    <div class="close"><span class="iconfont iconicon-test"></span></div>
    <div class="logo"><span class="iconfont iconnew"></span></div>
    <div class="inputs">
      <!-- 
        :value='username':数据影响元素：数据为元素赋值
        @currentValue='getusername':元素影响数据，使用元素的value值为变量赋值 -->

      <!-- v-model：实现数据的双向绑定
        数据影响元素：为子组件的value属性赋值
        元素影响数据：监听子组件发出的input事件，并进行处理 -->

      <!-- 使用子组件的时候，所赋值的值优先赋值给子组件的props属性，但是如果没有对应的props成员，那么就会赋值给子组件的根元素 -->
      <!-- <hminput :suiyi='username'
                 @suiyifn='(data)=>{username=data}'
                 placeholder='请输入用户名'></hminput> -->
      <hminput
        v-model="username"
        placeholder="请输入用户名"
        :rules="/^1[35789]\d{9}$/"
      ></hminput>

      <input placeholder="密码" class="input" type="password" />
    </div>
    <p class="tips">
      没有账号？
      <a href="#/register" class="">去注册</a>
    </p>
    <div class="button">
      <hmbutton></hmbutton>
    </div>
  </div>
</template>
<script>
import hmbutton from "@/components/hmbutton.vue";
import hminput from "@/components/hminput.vue";
export default {
  data() {
    return {
      username: "13998877665",
    };
  },
  components: {
    hmbutton,
    hminput,
  },
  methods: {
    login() {
      console.log("username:", this.username);
    },
  },
};
</script>
<style lang='less' scoped>
.container {
  padding: 20px;
}
.close {
  span {
    font-size: 27 / 360 * 100vw;
  }
}
.logo {
  display: flex;
  justify-content: center;

  span {
    display: block;
    font-size: 126 / 360 * 100vw;
    color: #d81e06;
  }
}
.inputs {
  input {
    margin-bottom: 20px;
  }
}
.tips {
  text-align: right;
  margin-bottom: 20px;
  a {
    color: #3385ff;
  }
}
</style>
